<template>
  <div id="app">
    <div class="head">
      <div class="inner">再次学习Vue，一步一步的来，如需查看代码，请查看相应路由对应的代码。</div>
    </div>
    <router-view :style="{'min-height': setClientHight + 'px'}" class="middleInfo"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    setClientHight () {
      if (window.innerHeight < 400) {
        return 400
      } else {
        return window.innerHeight - 48
      }
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  background: #fff;
  font-size: 16px;
  .head {
    width: 100%;
    height: 48px;
    background: #282c34;
    .inner {
      width: 1200px;
      margin: 0 auto;
      font-size: 16px;
      line-height: 48px;
      color: #fff;
    }
  }
  .middleInfo {
    width: 1200px;
    margin: 0 auto;
  }
  .footer {
    padding: 20px 0;
    width: 100%;
    height: 100px;
    background: #282c34;
    color: #fff;
    font-size: 14px;
    p {
      text-align: center;
      line-height: 60px;
    }
  }
}
</style>
